<script lang="ts">
import { ref, watch, nextTick, onMounted, defineComponent, PropType } from "vue";
import _ from "lodash";
import { getExpComponent, TitleContent, fun, obj } from "@/lib";

interface TCC extends TitleContent {
  click?: (param: TCC) => any;
}

interface Bottom extends TCC {
  dtl: TitleContent;
  dtr: TitleContent;
  dbl: TitleContent;
  dbr: TitleContent;
}
interface Main extends TCC {
  left: TCC;
  right: TCC;
  top: TCC[];
}
interface Header {
  title: string;
  click?: (param: Header) => any;
}
export interface Value {
  alt: string;
  header: Header;
  main: Main;
  bottom: Bottom[];
}
const component = defineComponent({
  props: {
    modelValue: {
      type: Object as PropType<Value>,
      required: false,
      default: {
        alt: "图片弄丢了?",
        header: { title: "数据可视化显示系统" },
        main: {
          title: "中间标题",
          content: "数字789",
          left: {
            title: "完成率",
            content: "68%",
          },
          right: {
            title: "同比",
            content: "69%",
          },
          top: [
            { title: "数据1", content: "11%" },
            { title: "数据2", content: "12%" },
            { title: "数据3", content: "13%" },
            { title: "数据4", content: "14%" },
            { title: "数据5", content: "15%" },
            { title: "数据6", content: "16%" },
          ],
        },
        bottom: [
          {
            title: "标题1",
            content: "数据1",
            dtl: { title: "1标题tl", content: "11.1%" },
            dtr: { title: "1标题tr", content: "11.2%" },
            dbl: { title: "1标题bl", content: "11.3%" },
            dbr: { title: "1标题br", content: "11.4%" },
          },
          {
            title: "标题2",
            content: "数据2",
            dtl: { title: "2标题tl", content: "12.1%" },
            dtr: { title: "2标题tr", content: "12.2%" },
            dbl: { title: "2标题bl", content: "12.3%" },
            dbr: { title: "2标题br", content: "12.4%" },
          },
          {
            title: "标题3",
            content: "数据3",
            dtl: { title: "3标题tl", content: "13.1%" },
            dtr: { title: "3标题tr", content: "13.2%" },
            dbl: { title: "3标题bl", content: "13.3%" },
            dbr: { title: "3标题br", content: "13.4%" },
          },
          {
            title: "标题4",
            content: "数据4",
            dtl: { title: "4标题tl", content: "14.1%" },
            dtr: { title: "4标题tr", content: "14.2%" },
            dbl: { title: "4标题bl", content: "14.3%" },
            dbr: { title: "4标题br", content: "14.4%" },
          },
          {
            title: "标题5",
            content: "数据5",
            dtl: { title: "5标题tl", content: "15.1%" },
            dtr: { title: "5标题tr", content: "15.2%" },
            dbl: { title: "5标题bl", content: "15.3%" },
            dbr: { title: "5标题br", content: "15.4%" },
          },
          {
            title: "标题6",
            content: "数据6",
            dtl: { title: "6标题tl", content: "16.1%" },
            dtr: { title: "6标题tr", content: "16.2%" },
            dbl: { title: "6标题bl", content: "16.3%" },
            dbr: { title: "6标题br", content: "16.4%" },
          },
          {
            title: "标题7",
            content: "数据7",
            dtl: { title: "7标题tl", content: "17.1%" },
            dtr: { title: "7标题tr", content: "17.2%" },
            dbl: { title: "7标题bl", content: "17.3%" },
            dbr: { title: "7标题br", content: "17.4%" },
          },
          {
            title: "标题8",
            content: "数据8",
            dtl: { title: "8标题tl", content: "18.1%" },
            dtr: { title: "8标题tr", content: "18.2%" },
            dbl: { title: "8标题bl", content: "18.3%" },
            dbr: { title: "8标题br", content: "18.4%" },
          },
          {
            title: "标题9",
            content: "数据9",
            dtl: { title: "9标题tl", content: "19.1%" },
            dtr: { title: "9标题tr", content: "19.2%" },
            dbl: { title: "9标题bl", content: "19.3%" },
            dbr: { title: "9标题br", content: "19.4%" },
          },
        ],
      },
    },
  },
  setup(props) {
    // #region 闪电
    function lightning(canvas: HTMLCanvasElement, opt: { width: number; height: number; s: number; e: number; r: number }) {
      const width = opt.width,
        height = opt.height,
        ctx = canvas.getContext("2d") as CanvasRenderingContext2D,
        bg = [4, 10, 11],
        rate = opt.r,
        w = width - 10,
        pt1 = { x: opt.s, y: height / 2 }, //闪电起点
        pt2 = { x: opt.e, y: height / 2 }; //闪电终点

      if (!ctx) return;

      canvas.width = width;
      canvas.height = height;
      ctx.beginPath();
      ctx.rect(0, 0, width, height);
      ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`;
      ctx.fill();

      // 入场动画
      const h1 = setTimeout(() => {
        const timeID = setInterval(() => {
          if (pt1) {
            pt1.x += rate;
            if ((rate > 0 && pt1.x > w) || (rate < 0 && pt1.x < 10)) {
              clearInterval(timeID);
            }
          }
        }, 60);
        clearTimeout(h1);
      }, 1000);

      function blur(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, amt: number) {
        ctx.filter = `blur(${amt}px)`;
        ctx.drawImage(canvas, 0, 0);
        ctx.filter = "none";
      }

      function fade(ctx: CanvasRenderingContext2D, amt: number, width: any, height: any) {
        if (ctx) {
          ctx.beginPath();
          ctx.rect(0, 0, width, height);
          ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`;
          ctx.fill();
        }
      }

      function draw() {
        let iterations = [pt1, pt2];
        let newiterations, i, j;
        for (i = 0; i < 8; i++) {
          newiterations = [iterations[0]];
          for (j = 1; j < iterations.length; j++) {
            newiterations.push(getRandMidpoint(iterations[j - 1] as any, iterations[j] as any, 200 / (i * i + 1)));
            newiterations.push(iterations[j]);
          }
          iterations = newiterations.concat([]);
        }
        if (!ctx) return;
        ctx.beginPath();
        ctx.moveTo(iterations[0].x, iterations[0].y as any);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "#04e4c9";
        // ctx.strokeStyle = `hsla(${Math.sin( step / 30) * 120 + 50},${90}%,${70}%,1)`
        // console.log(step);
        for (i = 1; i < iterations.length; i++) {
          ctx.lineTo(iterations[i].x, iterations[i].y as any);
        }
        ctx.stroke();
        ctx.closePath();
      }

      function getRandMidpoint(pa: { y: number; x: number }, pb: { y: number; x: number }, range: number) {
        const a = Math.atan2(pb.y - pa.y, pb.x - pa.x) + Math.PI / 2;
        const half = { y: (pb.y - pa.y) / 2 + pa.y, x: (pb.x - pa.x) / 2 + pa.x };
        const offset = (Math.random() * range) / 3 - range / 6; //这里控制闪电的抖动幅度
        const ho = {
          x: Math.cos(a) * offset + half.x,
          y: Math.sin(a) * offset + half.y,
        };
        return ho;
      }

      setInterval(() => {
        blur(ctx, canvas, 1);
        draw();
        fade(ctx, 0.1, width, height);
      }, 100);
    }
    // #endregion
    // #region 中间背景动画
    function fAnimate() {
      const canvas = animate.value,
        parent = animate.value?.parentElement,
        ctx = canvas?.getContext("2d");
      if (!canvas || !parent || !ctx) {
        return;
      }

      var App: { [k: string]: any } = {};
      App.setup = function () {
        // 创建canvas元素，并加入body中
        this.filename = "spipa";

        // 控制canvas幕布的大小
        canvas.width = parent.clientWidth;
        canvas.height = parent.clientHeight;
        this.canvas = canvas;

        this.ctx = ctx;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.dataToImageRatio = 1;
        this.ctx.imageSmoothingEnabled = false;
        this.ctx.webkitImageSmoothingEnabled = false;
        this.ctx.msImageSmoothingEnabled = false;
        this.xC = this.width / 2;
        this.yC = this.height / 2;

        this.stepCount = 0;
        this.particles = [];
        this.lifespan = 1000;
        this.popPerBirth = 1;
        this.maxPop = 200;
        this.birthFreq = 5;

        // Build grid
        this.gridSize = 8; // 运动坐标
        this.gridSteps = Math.floor(1000 / this.gridSize);
        this.grid = [];
        var i = 0;
        for (var xx = -500; xx < 500; xx += this.gridSize) {
          for (var yy = -500; yy < 500; yy += this.gridSize) {
            // 径向场，r的三角函数，最大值在r0附近
            var r = Math.abs(xx) + Math.abs(yy), //Math.sqrt(xx*xx+yy*yy),
              r0 = 3 * w.value, //中间方形的大小
              field;
            if (r < r0) field = (255 / r0) * r;
            else if (r > r0) field = 255 - Math.min(255, (r - r0) / 2);

            this.grid.push({
              x: xx,
              y: yy,
              busyAge: 0,
              spotIndex: i,
              isEdge: xx == -500 ? "left" : xx == -500 + this.gridSize * (this.gridSteps - 1) ? "right" : yy == -500 ? "top" : yy == -500 + this.gridSize * (this.gridSteps - 1) ? "bottom" : false,
              field: field,
            });
            i++;
          }
        }
        this.gridMaxIndex = i;

        this.initDraw();
      };
      App.evolve = function () {
        this.stepCount++;

        // Increment all grid ages
        this.grid.forEach(function (e: any) {
          if (e.busyAge > 0) e.busyAge++;
        });

        if (this.stepCount % this.birthFreq == 0 && this.particles.length + this.popPerBirth < this.maxPop) {
          this.birth();
        }
        App.move();
        App.draw();
      };
      App.birth = function () {
        var x, y;
        var gridSpotIndex = Math.floor(Math.random() * this.gridMaxIndex),
          gridSpot = this.grid[gridSpotIndex],
          x = gridSpot.x,
          y = gridSpot.y;

        var particle = {
          hue: -10, // + Math.floor(50*Math.random()),
          sat: 95, //30 + Math.floor(70*Math.random()),
          lum: 20 + Math.floor(40 * Math.random()),
          x: x,
          y: y,
          xLast: x,
          yLast: y,
          xSpeed: 0,
          ySpeed: 0,
          age: 0,
          ageSinceStuck: 0,
          attractor: {
            oldIndex: gridSpotIndex,
            gridSpotIndex: gridSpotIndex, // Pop at random position on grid
          },
          name: "seed-" + Math.ceil(10000000 * Math.random()),
        };
        this.particles.push(particle);
      };
      App.kill = function (particleName: any) {
        var newArray = _.reject(this.particles, function (seed) {
          return seed.name == particleName;
        });
        this.particles = _.cloneDeep(newArray);
      };
      App.move = function () {
        for (var i = 0; i < this.particles.length; i++) {
          // Get particle
          var p = this.particles[i];

          // Save last position
          p.xLast = p.x;
          p.yLast = p.y;

          // Attractor and corresponding grid spot
          var index = p.attractor.gridSpotIndex,
            gridSpot = this.grid[index];

          // Maybe move attractor and with certain constraints
          if (Math.random() < 0.5) {
            // Move attractor
            if (!gridSpot.isEdge) {
              // Change particle's attractor grid spot and local move function's grid spot
              var topIndex = index - 1,
                bottomIndex = index + 1,
                leftIndex = index - this.gridSteps,
                rightIndex = index + this.gridSteps,
                topSpot = this.grid[topIndex],
                bottomSpot = this.grid[bottomIndex],
                leftSpot = this.grid[leftIndex],
                rightSpot = this.grid[rightIndex];

              // Choose neighbour with highest field value (with some desobedience...)
              var chaos = 30;
              var maxFieldSpot = _.maxBy([topSpot, bottomSpot, leftSpot, rightSpot], function (e) {
                return e.field + chaos * Math.random();
              });

              var potentialNewGridSpot = maxFieldSpot;
              if (potentialNewGridSpot.busyAge == 0 || potentialNewGridSpot.busyAge > 15) {
                // Allow wall fading
                //if (potentialNewGridSpot.busyAge == 0) {// Spots busy forever
                // Ok it's free let's go there
                p.ageSinceStuck = 0; // Not stuck anymore yay
                p.attractor.oldIndex = index;
                p.attractor.gridSpotIndex = potentialNewGridSpot.spotIndex;
                gridSpot = potentialNewGridSpot;
                gridSpot.busyAge = 1;
              } else p.ageSinceStuck++;
            } else p.ageSinceStuck++;

            if (p.ageSinceStuck == 10) this.kill(p.name);
          }

          // Spring attractor to center with viscosity
          var k = 8,
            visc = 0.4;
          var dx = p.x - gridSpot.x,
            dy = p.y - gridSpot.y,
            dist = Math.sqrt(dx * dx + dy * dy);

          // Spring
          var xAcc = -k * dx,
            yAcc = -k * dy;

          p.xSpeed += xAcc;
          p.ySpeed += yAcc;

          // Calm the f*ck down
          p.xSpeed *= visc;
          p.ySpeed *= visc;

          // Store stuff in particle brain
          p.speed = Math.sqrt(p.xSpeed * p.xSpeed + p.ySpeed * p.ySpeed);
          p.dist = dist;

          // Update position
          p.x += 0.1 * p.xSpeed;
          p.y += 0.1 * p.ySpeed;

          // Get older
          p.age++;

          // Kill if too old
          if (p.age > this.lifespan) {
            this.kill(p.name);
            this.deathCount++;
          }
        }
      };
      App.initDraw = function () {
        this.ctx.beginPath();
        this.ctx.rect(0, 0, this.width, this.height);
        this.ctx.fillStyle = "transparent";
        this.ctx.fill();
        this.ctx.closePath();
      };

      App.draw = function () {
        this.drawnInLastFrame = 0;
        if (!this.particles.length) return false;

        this.ctx.beginPath();
        this.ctx.rect(0, 0, this.width, this.height);
        // this.ctx.fillStyle = 'transparent';
        this.ctx.fillStyle = "rgba(12, 22, 25, 0.1)";
        this.ctx.fill();
        this.ctx.closePath();
        for (var i = 0; i < this.particles.length; i++) {
          // Draw particle
          var p = this.particles[i];

          var h, s, l, a;

          h = p.hue + this.stepCount / 30;
          s = p.sat;
          l = p.lum;
          a = 1;

          var last = this.dataXYtoCanvasXY(p.xLast, p.yLast),
            now = this.dataXYtoCanvasXY(p.x, p.y);
          var attracSpot = this.grid[p.attractor.gridSpotIndex],
            attracXY = this.dataXYtoCanvasXY(attracSpot.x, attracSpot.y);
          var oldAttracSpot = this.grid[p.attractor.oldIndex],
            oldAttracXY = this.dataXYtoCanvasXY(oldAttracSpot.x, oldAttracSpot.y);

          this.ctx.beginPath();

          this.ctx.strokeStyle = "green";
          this.ctx.fillStyle = "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";

          // Particle trail
          this.ctx.moveTo(last.x, last.y);
          this.ctx.lineTo(now.x, now.y);

          this.ctx.lineWidth = 1.5 * this.dataToImageRatio;
          this.ctx.stroke();
          this.ctx.closePath();

          // Attractor positions
          this.ctx.beginPath();
          this.ctx.lineWidth = 1.5 * this.dataToImageRatio;
          this.ctx.moveTo(oldAttracXY.x, oldAttracXY.y);
          this.ctx.lineTo(attracXY.x, attracXY.y);
          this.ctx.arc(attracXY.x, attracXY.y, 1.5 * this.dataToImageRatio, 0, 2 * Math.PI, false);

          //a /= 20;
          this.ctx.strokeStyle = "green";
          this.ctx.fillStyle = "green";
          //this.ctx.stroke();
          this.ctx.fill();

          this.ctx.closePath();

          // UI counter
          this.drawnInLastFrame++;
        }
      };
      App.dataXYtoCanvasXY = function (x: any, y: any) {
        var zoom = 1.6;
        var xx = this.xC + x * zoom * this.dataToImageRatio,
          yy = this.yC + y * zoom * this.dataToImageRatio;

        return { x: xx, y: yy };
      };

      setTimeout(function () {
        App.setup();
        App.draw();

        var frame = function () {
          App.evolve();
          requestAnimationFrame(frame);
        };
        frame();
      }, 1000);
    }
    // #endregion
    function init() {
      if (entityElement.value) {
        w.value = entityElement.value.clientWidth / 80;
        entityElement.value.style.fontSize = w.value + "px";
      }
      if (lightning1.value && lightning2.value && lightning3.value && lightning4.value && lightning1.value.parentElement) {
        let t = lightning1.value.parentElement;
        const l = { width: t.clientWidth, height: t.clientHeight, s: -20, e: -20, r: 10 },
          s = t.clientWidth + 20,
          r = Object.assign({}, l, { s, e: s, r: -10 });
        lightning(lightning1.value, l);
        lightning(lightning2.value, l);
        lightning(lightning3.value, r);
        lightning(lightning4.value, r);
      }
      fAnimate();
    }
    function reShow() {
      if (!show.value) {
        nextTick(() => {
          show.value = true;
          init();
        });
      }
    }
    function click(p: { click?: fun } & obj) {
      console.log(p);
      p.click instanceof Function && p.click(p);
    }

    //#region 定义数据
    const constValue = {
        header: 4,
        lightning: 7,
        jz: 9,
        arrow: 3,
      },
      lightning1 = ref<InstanceType<typeof HTMLCanvasElement>>(),
      lightning2 = ref<InstanceType<typeof HTMLCanvasElement>>(),
      lightning3 = ref<InstanceType<typeof HTMLCanvasElement>>(),
      lightning4 = ref<InstanceType<typeof HTMLCanvasElement>>(),
      entityElement = ref<InstanceType<typeof HTMLDivElement>>(),
      animate = ref<InstanceType<typeof HTMLCanvasElement>>(),
      show = ref(false),
      w = ref(0),
      ulBoxTime = ref(props.modelValue.bottom.length * 3 + "s");
    //#endregion
    watch(show, reShow);
    onMounted(reShow);

    return { show, w, constValue, ulBoxTime, lightning1, lightning2, lightning3, lightning4, entityElement, animate, click };
  },
});
export default getExpComponent(component, "z001");
</script>
<template>
  <div class="mx-z001" ref="entityElement">
    <!-- 头部模块 -->
    <div class="header" @click.stop="click(modelValue.header)">
      <ul class="left">
        <li v-for="i in constValue.header" :key="i" />
      </ul>
      <div class="title">
        <span v-html="modelValue.header.title" />
      </div>
      <ul class="right">
        <li v-for="i in constValue.header" :key="i" />
      </ul>
    </div>
    <!-- 主体模块 -->
    <div class="main">
      <!-- 左侧模块 -->
      <div class="main-left" @click.stop="click(modelValue.main.left)">
        <!-- 完成率 -->
        <div class="completion">
          <div class="completion-content">
            <div class="rate">
              <h5>
                <span v-html="modelValue.main.left.title" />
              </h5>
              <p v-html="modelValue.main.left.content" />
            </div>
          </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
          <div class="lightning1">
            <div class="sd1"> <canvas ref="lightning1" /> </div>
            <div class="jd1">
              <ul class="cd">
                <li v-for="i in constValue.lightning" :key="i" />
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
          </div>
          <div class="lightning2">
            <div class="sd2"><canvas ref="lightning2" /></div>
            <div class="jd2">
              <ul class="cd">
                <li v-for="i in constValue.lightning" :key="i" />
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
          </div>
        </div>
        <!-- top3 -->
        <div class="top3">
          <ul>
            <template v-for="(i, ii) in modelValue.main.top" :key="ii">
              <li v-if="ii < 3" @click.stop="click(i)">
                <div class="title">NO.{{ ii + 1 }}</div>
                <div class="content">
                  <p v-html="i.content" />
                  <span v-html="i.title" />
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <!-- 中间模块 -->
      <div class="main-middle" @click.stop="click(modelValue.main)">
        <div class="external1"></div>
        <div class="external2"></div>
        <div class="external3"></div>
        <div class="external4"></div>
        <!-- 加载 -->
        <div class="jz1">
          <ul>
            <li v-for="i in constValue.jz" :key="i" />
          </ul>
        </div>
        <div class="jz2">
          <ul>
            <li v-for="i in constValue.jz" :key="i" />
          </ul>
        </div>
        <!-- 内边框 -->
        <div class="inner1"></div>
        <div class="inner2"></div>
        <!-- 内加载箭头模块 -->
        <div class="arrow-l">
          <ol>
            <li v-for="i in constValue.arrow" :key="i" />
          </ol>
        </div>
        <div class="arrow-r">
          <ol>
            <li v-for="i in constValue.arrow" :key="i" />
          </ol>
        </div>
        <!-- 中间仪表图 -->
        <div class="meter"></div>
        <!-- 中间背景canvas -->
        <div class="animate">
          <canvas ref="animate" />
        </div>
        <!-- 销售额 -->
        <div class="sale">
          <p><span v-html="modelValue.main.title" /></p>
          <p><span v-html="modelValue.main.content" /></p>
        </div>
      </div>
      <!-- 右侧模块 -->
      <div class="main-right" @click.stop="click(modelValue.main.right)">
        <!-- 同比 -->
        <div class="compare">
          <div class="compare-content">
            <div class="rate2">
              <h5>
                <span v-html="modelValue.main.right.title" />
              </h5>
              <p v-html="modelValue.main.right.content" />
            </div>
          </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
          <div class="lightning3">
            <div class="jd3">
              <ul class="cd">
                <li v-for="i in constValue.lightning" :key="i" />
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
            <div class="sd3"><canvas ref="lightning3" /></div>
          </div>
          <div class="lightning4">
            <div class="jd4">
              <ul class="cd">
                <li v-for="i in constValue.lightning" :key="i" />
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
            <div class="sd4"><canvas ref="lightning4" /></div>
          </div>
        </div>
        <!-- top6 -->
        <div class="top6">
          <ul>
            <template v-for="(i, ii) in modelValue.main.top" :key="ii">
              <li v-if="ii > 2 && ii < 6" @click.stop="click(i)">
                <div class="title">NO.{{ ii + 1 }}</div>
                <div class="content">
                  <p v-html="i.content" />
                  <span v-html="i.title" />
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部模块 -->
    <div class="bottom" @click.stop="click(modelValue.bottom)">
      <div class="ul-box">
        <ul>
          <li v-for="(i, ii) in modelValue.bottom" :key="ii" @click.stop="click(i)">
            <div class="li-content">
              <p><span v-html="i.title" /></p>
              <p><span v-html="i.content" /></p>
              <div class="li-box">
                <div class="box1">
                  <h5><span v-html="i.dtl.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/wc.png" :alt="modelValue.alt" />
                    <span v-html="i.dtl.content" />
                  </div>
                </div>
                <div class="box2">
                  <h5><span v-html="i.dtr.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/zc.png" :alt="modelValue.alt" />
                    <span v-html="i.dtr.content" />
                  </div>
                </div>
                <div class="box3">
                  <h5><span v-html="i.dbl.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/sq.png" :alt="modelValue.alt" />
                    <span v-html="i.dbl.content" />
                  </div>
                </div>
                <div class="box4">
                  <h5><span v-html="i.dbr.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/tb.png" :alt="modelValue.alt" />
                    <span v-html="i.dbr.content" />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ul>
          <li v-for="(i, ii) in modelValue.bottom" :key="ii" @click.stop="click(i)">
            <div class="li-content">
              <p><span v-html="i.title" /></p>
              <p><span v-html="i.content" /></p>
              <div class="li-box">
                <div class="box1">
                  <h5><span v-html="i.dtl.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/wc.png" :alt="modelValue.alt" />
                    <span v-html="i.dtl.content" />
                  </div>
                </div>
                <div class="box2">
                  <h5><span v-html="i.dtr.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/zc.png" :alt="modelValue.alt" />
                    <span v-html="i.dtr.content" />
                  </div>
                </div>
                <div class="box3">
                  <h5><span v-html="i.dbl.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/sq.png" :alt="modelValue.alt" />
                    <span v-html="i.dbl.content" />
                  </div>
                </div>
                <div class="box4">
                  <h5><span v-html="i.dbr.title" /></h5>
                  <div class="pic">
                    <img src="@/assets/images/tb.png" :alt="modelValue.alt" />
                    <span v-html="i.dbr.content" />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
// 引入字体
@font-face {
  font-family: "液晶数字字体";
  src: url("@/assets/fonts/lcd.TTF");
}
ol,
ul,
li {
  list-style: none;
}
.mx-z001 {
  width: 100%;
  height: 100%;
  overflow: hidden;

  background: url(@/assets/images/z001.png) no-repeat center;
  background-size: 100%;
  // 头部模块
  .header {
    width: 75%;
    height: 10%;
    margin: auto;
    > div {
      float: left;
    }
    .title {
      height: 100%;
      width: 40%;
      text-align: center;
      color: #fff;
      font-size: 1.4em;
      display: table;
      opacity: 0;
      animation: zoomIn 0.5s linear forwards 0.8s;
      span {
        display: table-cell;
        vertical-align: middle;
      }
    }
    .left,
    .right {
      width: 30%;
      height: 100%;
      float: left;
      li {
        width: 3.5em;
        height: 1em;
        background-color: #02b687;
        opacity: 0;
        margin: 0 2%;
        float: left;
        border-radius: 1em;
        margin-top: 10%;
      }
    }
    .left {
      li:nth-of-type(1) {
        animation: show1 0.2s linear forwards;
      }
      li:nth-of-type(2) {
        animation: show2 0.2s linear forwards 0.2s;
      }
      li:nth-of-type(3) {
        animation: show3 0.2s linear forwards 0.4s;
      }
      li:nth-of-type(4) {
        animation: show4 0.2s linear forwards 0.6s;
      }
    }
    .right {
      li {
        float: right;
      }
      li:nth-of-type(1) {
        animation: show1 0.2s linear forwards;
      }
      li:nth-of-type(2) {
        animation: show2 0.2s linear forwards 0.2s;
      }
      li:nth-of-type(3) {
        animation: show3 0.2s linear forwards 0.4s;
      }
      li:nth-of-type(4) {
        animation: show4 0.2s linear forwards 0.6s;
      }
    }
  }

  // 主题模块
  .main {
    width: 100%;
    height: 60%;
    // background-color: rgba(255,255,255,.3);
    > div {
      float: left;
    }
    .main-left {
      width: 22.5%;
      height: 100%;
      .completion {
        width: 100%;
        height: 30%;
        position: relative;
        .completion-content {
          width: 7em;
          height: 7em;
          background: url(@/assets/images/border.png) no-repeat center;
          background-size: contain;
          position: absolute;
          left: -50%;
          top: 50%;
          transform: translate(-50%, -50%);
          animation: animate1 1s linear forwards 7s;
          .rate {
            width: 4em;
            height: 4em;
            position: absolute;
            left: 17%;
            top: 51%;
            transform: translateY(-50%);
            background: url(@/assets/images/cricle.png) no-repeat center;
            background-size: contain;
            animation: rotate1 5s ease infinite;
            h5 {
              text-align: center;
              height: 50%;
              width: 100%;
              color: #fff;
              display: table;
              span {
                display: table-cell;
                vertical-align: bottom;
                font-size: 0.8em;
              }
            }
            p {
              text-align: center;
              height: 50%;
              width: 100%;
              color: #fff;
              display: table;
              span {
                display: table-cell;
                vertical-align: middle;
              }
            }
          }
        }
      }
      .lightning {
        width: 100%;
        height: 40%;
        .lightning1,
        .lightning2 {
          width: 100%;
          height: 50%;
        }
        .lightning1 {
          > div {
            float: left;
          }
          .sd1 {
            width: 55%;
            height: 100%;
          }
          .jd1 {
            width: 45%;
            height: 100%;
            > div {
              float: left;
            }
            ul {
              float: left;
              margin-top: 30%;
              li {
                float: left;
                margin-right: 0.15em;
                background-color: #00e4c8;
                border-radius: 50%;
                opacity: 0;
              }
              li:nth-of-type(1) {
                width: 0.5em;
                height: 0.5em;
                animation: show4 0.1s linear forwards 2.5s;
              }
              li:nth-of-type(2) {
                width: 0.54em;
                height: 0.54em;
                animation: show4 0.1s linear forwards 2.6s;
              }
              li:nth-of-type(3) {
                width: 0.58em;
                height: 0.58em;
                animation: show4 0.1s linear forwards 2.7s;
              }
              li:nth-of-type(4) {
                width: 0.62em;
                height: 0.62em;
                animation: show4 0.1s linear forwards 2.8s;
              }
              li:nth-of-type(5) {
                width: 0.66em;
                height: 0.66em;
                animation: show4 0.1s linear forwards 2.9s;
              }
              li:nth-of-type(6) {
                width: 0.7em;
                height: 0.7em;
                animation: show4 0.1s linear forwards 3s;
              }
              li:nth-of-type(7) {
                width: 0.74em;
                height: 0.74em;
                animation: show4 0.1s linear forwards 3.1s;
              }
            }
            .box1 {
              width: 0.8em;
              height: 40%;
              background-color: #00e4c8;
              margin-left: 5%;
              margin-top: 20%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.2s;
            }
            .box2 {
              width: 0.8em;
              height: 60%;
              background-color: #00e4c8;
              margin-top: 15%;
              margin-left: 5%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.3s;
            }
          }
        }
        .lightning2 {
          > div {
            float: left;
          }
          .sd2 {
            width: 55%;
            height: 100%;
          }
          .jd2 {
            width: 45%;
            height: 100%;
            > div {
              float: left;
            }
            ul {
              float: left;
              margin-top: 30%;
              li {
                float: left;
                margin-right: 0.15em;
                background-color: #00e4c8;
                border-radius: 50%;
                opacity: 0;
              }
              li:nth-of-type(1) {
                width: 0.5em;
                height: 0.5em;
                animation: show4 0.1s linear forwards 2.5s;
              }
              li:nth-of-type(2) {
                width: 0.54em;
                height: 0.54em;
                animation: show4 0.1s linear forwards 2.6s;
              }
              li:nth-of-type(3) {
                width: 0.58em;
                height: 0.58em;
                animation: show4 0.1s linear forwards 2.7s;
              }
              li:nth-of-type(4) {
                width: 0.62em;
                height: 0.62em;
                animation: show4 0.1s linear forwards 2.8s;
              }
              li:nth-of-type(5) {
                width: 0.66em;
                height: 0.66em;
                animation: show4 0.1s linear forwards 2.9s;
              }
              li:nth-of-type(6) {
                width: 0.7em;
                height: 0.7em;
                animation: show4 0.1s linear forwards 3s;
              }
              li:nth-of-type(7) {
                width: 0.74em;
                height: 0.74em;
                animation: show4 0.1s linear forwards 3.1s;
              }
            }
            .box1 {
              width: 0.8em;
              height: 40%;
              background-color: #00e4c8;
              margin-left: 5%;
              margin-top: 20%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.2s;
            }
            .box2 {
              width: 0.8em;
              height: 60%;
              background-color: #00e4c8;
              margin-top: 15%;
              margin-left: 5%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.3s;
            }
          }
        }
      }
      .top3 {
        width: 100%;
        height: 30%;
        position: relative;
        ul {
          width: 60%;
          height: 100%;
          position: absolute;
          left: -50%;
          top: 0;
          transform: translateX(-50%);
          animation: animate1 1s linear forwards 7s;
          li {
            float: left;
            width: 30%;
            height: 100%;
            margin: 0 1.5%;
          }
          li:nth-of-type(1) {
            background: url(@/assets/images/1.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #ff7a9a;
              font-size: 0.8em;
              margin-top: -5%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.5em;
                display: block;
              }
            }
          }
          li:nth-of-type(2) {
            background: url(@/assets/images/2.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #01c793;
              font-size: 0.8em;
              margin-top: 20%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.5em;
                display: block;
              }
            }
          }
          li:nth-of-type(3) {
            background: url(@/assets/images/3.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #01c2aa;
              font-size: 0.8em;
              margin-top: 43%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.3em;
                display: block;
              }
            }
          }
        }
      }
    }
    .main-middle {
      width: 55%;
      height: 100%;
      position: relative;
      .external1 {
        width: 15%;
        height: 100%;
        background: url(@/assets/images/border1.png) no-repeat left;
        background-size: contain;
        position: absolute;
        left: 40%;
        top: 0;
        opacity: 0;
        animation: come1 0.5s linear forwards 3.4s;
      }
      .external2 {
        width: 15%;
        height: 100%;
        background: url(@/assets/images/border2.png) no-repeat right;
        background-size: contain;
        position: absolute;
        right: 40%;
        top: 0;
        opacity: 0;
        animation: come2 0.5s linear forwards 3.4s;
      }
      .external3 {
        width: 60%;
        height: 10%;
        background: url(@/assets/images/border3.png) no-repeat center top;
        background-size: contain;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 15%;
        opacity: 0;
        animation: come3 0.5s linear forwards 3.4s;
      }
      .external4 {
        width: 60%;
        height: 10%;
        background: url(@/assets/images/border4.png) no-repeat center bottom;
        background-size: contain;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        bottom: 10%;
        animation: come4 0.5s linear forwards 3.4s;
      }
      .jz1,
      .jz2 {
        opacity: 0;
        animation: show4 0.1s linear forwards 3.8s;
        ul {
          width: 30%;
          height: 38%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          overflow: hidden;
          li {
            width: 100%;
            height: 8%;
            margin: 40% 0;
            background-color: #ff7a9a;
          }
        }
      }
      .jz1 {
        width: 4%;
        height: 100%;
        background-color: red;
        background: url(@/assets/images/jz.png) no-repeat center;
        background-size: contain;
        position: absolute;
        left: 5%;
        top: 0;
      }
      .jz2 {
        width: 4%;
        height: 100%;
        background-color: red;
        background: url(@/assets/images/jz.png) no-repeat center;
        background-size: contain;
        position: absolute;
        right: 5%;
        top: 0;
      }
      .inner1 {
        width: 10%;
        height: 100%;
        position: absolute;
        left: 10%;
        top: 0;
        opacity: 0;
        background: url(@/assets/images/leftBorder.png) no-repeat center;
        background-size: 100%;
        animation: inner1 0.3s linear forwards 3.9s;
      }
      .inner2 {
        width: 10%;
        height: 100%;
        position: absolute;
        right: 10%;
        top: 0;
        opacity: 0;
        background: url(@/assets/images/rightBorder.png) no-repeat center;
        background-size: 100%;
        animation: inner2 0.3s linear forwards 3.9s;
      }
      .arrow-l {
        position: absolute;
        width: 10%;
        height: 20%;
        left: 15%;
        top: 40%;
        opacity: 0;
        animation: arrow1 1.5s linear infinite 4s;
        ol {
          width: 100%;
          height: 100%;
          li {
            width: 33%;
            height: 100%;
            float: left;
            background: url(@/assets/images/yuan.png) no-repeat center;
            background-size: 60%;
          }
          li:nth-of-type(3) {
            background: url(@/assets/images/arrow-l.png) no-repeat center;
            background-size: 80%;
          }
        }
      }
      .arrow-r {
        position: absolute;
        width: 10%;
        height: 20%;
        right: 15%;
        top: 40%;
        opacity: 0;
        animation: arrow2 1.5s linear infinite 4s;
        ol {
          width: 100%;
          height: 100%;
          li {
            width: 33%;
            height: 100%;
            float: right;
            background: url(@/assets/images/yuan.png) no-repeat center;
            background-size: 60%;
          }
          li:nth-of-type(3) {
            background: url(@/assets/images/arrow-r.png) no-repeat center;
            background-size: 80%;
          }
        }
      }
      .meter {
        width: 50%;
        height: 60%;
        background-color: rgba(255, 255, 255, 0.2);
        background: url(@/assets/images/huan.png) no-repeat center;
        background-size: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        opacity: 0;
        transform: translate(-50%, -50%);
        animation: meter 3s linear forwards 4.1s;
      }
      .animate {
        width: 70%;
        height: 70%;
        z-index: -1;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: animate 1s linear forwards 6s;
        canvas {
          transform-origin: 0 0;
          position: absolute;
          left: 0;
          top: 0;
          border-radius: 40%;
        }
      }
      .sale {
        width: 16em;
        height: 16em;
        background: url(@/assets/images/cicle.png) no-repeat center;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -8em;
        margin-top: -8em;
        opacity: 0;
        animation: sale 1s linear forwards 8s;
        p {
          width: 100%;
          height: 20%;
          text-align: center;
          color: #fff;
          display: table;
          font-size: 1.7em;
          span {
            display: table-cell;
            vertical-align: middle;
          }
        }
        p:nth-of-type(1) {
          margin-top: 30%;
        }
        p:nth-of-type(2) {
          font-family: "液晶数字字体";
          font-size: 2em;
        }
      }
    }
    .main-right {
      width: 22.5%;
      height: 100%;
      .compare {
        width: 100%;
        height: 30%;
        position: relative;
        .compare-content {
          width: 7em;
          height: 7em;
          background: url(@/assets/images/border02.png) no-repeat center;
          background-size: contain;
          position: absolute;
          left: 150%;
          top: 50%;
          transform: translate(-50%, -50%);
          animation: animate2 1s linear forwards 7s;
          .rate2 {
            width: 4em;
            height: 4em;
            position: absolute;
            left: 27%;
            top: 51%;
            transform: translateY(-50%);
            background: url(@/assets/images/cricle.png) no-repeat center;
            background-size: contain;
            animation: rotate1 5s ease infinite;
            h5 {
              text-align: center;
              height: 50%;
              width: 100%;
              color: #fff;
              display: table;
              span {
                display: table-cell;
                vertical-align: bottom;
                font-size: 0.8em;
              }
            }
            p {
              text-align: center;
              height: 50%;
              width: 100%;
              color: #fff;
              display: table;
              span {
                display: table-cell;
                vertical-align: middle;
              }
            }
          }
        }
      }
      .lightning {
        width: 100%;
        height: 40%;
        .lightning3,
        .lightning4 {
          width: 100%;
          height: 50%;
        }
        .lightning3 {
          > div {
            float: left;
          }
          .jd3 {
            width: 45%;
            height: 100%;
            > div {
              float: right;
            }
            ul {
              float: right;
              margin-top: 30%;
              li {
                float: right;
                margin-left: 0.15em;
                background-color: #00e4c8;
                border-radius: 50%;
                opacity: 0;
              }
              li:nth-of-type(1) {
                width: 0.5em;
                height: 0.5em;
                animation: show4 0.1s linear forwards 2.5s;
              }
              li:nth-of-type(2) {
                width: 0.54em;
                height: 0.54em;
                animation: show4 0.1s linear forwards 2.6s;
              }
              li:nth-of-type(3) {
                width: 0.58em;
                height: 0.58em;
                animation: show4 0.1s linear forwards 2.7s;
              }
              li:nth-of-type(4) {
                width: 0.62em;
                height: 0.62em;
                animation: show4 0.1s linear forwards 2.8s;
              }
              li:nth-of-type(5) {
                width: 0.66em;
                height: 0.66em;
                animation: show4 0.1s linear forwards 2.9s;
              }
              li:nth-of-type(6) {
                width: 0.7em;
                height: 0.7em;
                animation: show4 0.1s linear forwards 3s;
              }
              li:nth-of-type(7) {
                width: 0.74em;
                height: 0.74em;
                animation: show4 0.1s linear forwards 3.1s;
              }
            }
            .box1 {
              width: 0.8em;
              height: 40%;
              background-color: #00e4c8;
              margin-right: 5%;
              margin-top: 20%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.2s;
            }
            .box2 {
              width: 0.8em;
              height: 60%;
              background-color: #00e4c8;
              margin-top: 15%;
              margin-right: 5%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.3s;
            }
          }
          .sd3 {
            width: 55%;
            height: 100%;
          }
        }
        .lightning4 {
          > div {
            float: left;
          }
          .jd4 {
            width: 45%;
            height: 100%;
            > div {
              float: right;
            }
            ul {
              float: right;
              margin-top: 30%;
              li {
                float: right;
                margin-left: 0.15em;
                background-color: #00e4c8;
                border-radius: 50%;
                opacity: 0;
              }
              li:nth-of-type(1) {
                width: 0.5em;
                height: 0.5em;
                animation: show4 0.1s linear forwards 2.5s;
              }
              li:nth-of-type(2) {
                width: 0.54em;
                height: 0.54em;
                animation: show4 0.1s linear forwards 2.6s;
              }
              li:nth-of-type(3) {
                width: 0.58em;
                height: 0.58em;
                animation: show4 0.1s linear forwards 2.7s;
              }
              li:nth-of-type(4) {
                width: 0.62em;
                height: 0.62em;
                animation: show4 0.1s linear forwards 2.8s;
              }
              li:nth-of-type(5) {
                width: 0.66em;
                height: 0.66em;
                animation: show4 0.1s linear forwards 2.9s;
              }
              li:nth-of-type(6) {
                width: 0.7em;
                height: 0.7em;
                animation: show4 0.1s linear forwards 3s;
              }
              li:nth-of-type(7) {
                width: 0.74em;
                height: 0.74em;
                animation: show4 0.1s linear forwards 3.1s;
              }
            }
            .box1 {
              width: 0.8em;
              height: 40%;
              background-color: #00e4c8;
              margin-right: 5%;
              margin-top: 20%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.2s;
            }
            .box2 {
              width: 0.8em;
              height: 60%;
              background-color: #00e4c8;
              margin-top: 15%;
              margin-right: 5%;
              border-radius: 0.8em;
              opacity: 0;
              animation: show4 0.1s linear forwards 3.3s;
            }
          }
          .sd4 {
            width: 55%;
            height: 100%;
          }
        }
      }
      .top6 {
        width: 100%;
        height: 30%;
        position: relative;
        ul {
          width: 60%;
          height: 100%;
          position: absolute;
          left: 150%;
          top: 0;
          transform: translateX(-50%);
          animation: animate2 1s linear forwards 7s;
          li {
            float: left;
            width: 30%;
            height: 100%;
            margin: 0 1.5%;
          }
          li:nth-of-type(1) {
            background: url(@/assets/images/4.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #cab636;
              font-size: 0.8em;
              margin-top: 60%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.5em;
                display: block;
              }
            }
          }
          li:nth-of-type(2) {
            background: url(@/assets/images/5.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #028e4f;
              font-size: 0.8em;
              margin-top: 78%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.5em;
                display: block;
              }
            }
          }
          li:nth-of-type(3) {
            background: url(@/assets/images/6.png) no-repeat center bottom;
            background-size: 70%;
            .title {
              width: 100%;
              text-align: center;
              color: #01a893;
              font-size: 0.8em;
              margin-top: 95%;
            }
            .content {
              width: 100%;
              text-align: center;
              color: #fff;
              margin-top: 10%;
              p {
                font-size: 0.3em;
              }
              span {
                font-size: 0.3em;
                display: block;
              }
            }
          }
        }
      }
    }
  }

  // 底部模块
  .bottom {
    width: 100%;
    height: 30%;
    position: relative;
    overflow: hidden;
    .ul-box {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      white-space: nowrap;
      height: 100%;
      transform: translateX(-50%);
      position: relative;
      animation: move v-bind(ulBoxTime) linear infinite 12s;
      ul {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        li {
          width: 24em;
          height: 100%;
          background: url(@/assets/images/di.png) no-repeat center bottom;
          background-size: 50%;
          float: left;
          transform: translateY(100%);
          animation: di2 1s linear forwards 7s;
          // animation: di2 1s linear forwards;
          .li-content {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;

            opacity: 0; // 显示
            position: relative;
            width: 100%;
            // height: 60%;
            background: url(@/assets/images/bg.png) no-repeat center;
            background-size: contain;
            overflow: hidden;
            animation: show5 1s linear forwards 8.5s;
            p {
              width: 100%;
              height: 20%;
              text-align: center;
              color: #fff;
              display: table;
              span {
                display: table-cell;
                vertical-align: middle;
              }
            }
            p:nth-of-type(1) {
              margin-top: 10%;
            }
            p:nth-of-type(2) {
              font-family: "液晶数字字体";
              font-size: 1.5em;
            }
            .li-box {
              position: absolute;
              width: 70%;
              height: 80%;
              .box1,
              .box2,
              .box3,
              .box4 {
                width: 23%;
                height: 50%;
                position: absolute;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;

                h5 {
                  height: 50%;
                  color: #fff;
                  font-size: 0.7em;
                  font-weight: normal;
                  display: table;
                  span {
                    display: table-cell;
                    vertical-align: middle;
                  }
                }
                .pic {
                  height: 50%;
                  color: #fff;
                  font-size: 0.7em;
                  img {
                    width: 1em;
                    vertical-align: bottom;
                    margin-right: 5%;
                  }
                }
              }
              .box1 {
                left: 0;
                top: 0;
              }
              .box2 {
                right: 0;
                top: 0;
              }
              .box3 {
                left: 0;
                bottom: 0;
              }
              .box4 {
                right: 0;
                bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}
// #region 动画
// #region 开头显示动画
@keyframes show1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes show2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes show3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.75;
  }
}
@keyframes show4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  100% {
    opacity: 1;
  }
}
// #endregion

// #region border进场动画
@keyframes come1 {
  0% {
    opacity: 0;
    left: 40%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes come2 {
  0% {
    opacity: 0;
    right: 40%;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@keyframes come3 {
  0% {
    opacity: 0;
    top: 40%;
  }
  100% {
    opacity: 1;
    top: 15%;
  }
}
@keyframes come4 {
  0% {
    opacity: 0;
    bottom: 40%;
  }
  100% {
    opacity: 1;
    bottom: 10%;
  }
}
// #endregion

// #region 完成率旋转动画
@keyframes rotate1 {
  0% {
    transform: translateY(-50%) rotateY(0);
  }
  100% {
    transform: translateY(-50%) rotateY(360deg);
  }
}
// #endregion

// #region 内边框动画
@keyframes inner1 {
  0% {
    left: 40%;
    opacity: 0;
  }
  100% {
    left: 10%;
    opacity: 1;
  }
}
@keyframes inner2 {
  0% {
    right: 40%;
    opacity: 0;
  }
  100% {
    right: 10%;
    opacity: 1;
  }
}
// #endregion

// #region 箭头动画
@keyframes arrow1 {
  0% {
    opacity: 0.2;
    left: 10%;
  }
  100% {
    opacity: 1;
    left: 15%;
  }
}
@keyframes arrow2 {
  0% {
    opacity: 0.2;
    right: 10%;
  }
  100% {
    opacity: 1;
    right: 15%;
  }
}
// #endregion

// #region 仪表动画
@keyframes meter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0);
  }

  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8) rotate(360deg);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8) rotate(540deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(540deg);
  }
}
// #endregion

// #region 中间canvas背景动画
@keyframes animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
// #endregion

// #region 销售额动画
@keyframes sale {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 60px, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
// #endregion

// #region 两侧动画
@keyframes animate1 {
  0% {
    left: -50%;
  }
  100% {
    left: 50%;
  }
}
@keyframes animate2 {
  0% {
    left: 150%;
  }
  100% {
    left: 50%;
  }
}
// #endregion

// #region 底部动画
@keyframes di2 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(00%);
  }
}
// #endregion

// #region 投射动画
@keyframes show5 {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
// #endregion
// #endregion
</style>
